<template>
    <view class="container" :style="themeColor">
        <header-bar :config="config"></header-bar>
        <view class="header">
            <text class="balance-title">当前余额</text>
            <text class="balance-price">{{ balance }}</text>
            <image class="bg" mode="widthFix" src="@/pages_me/static/img/wealth-charge-banner.png"></image>
        </view>
        <view class="main">
            <view class="rebate-info">
                <view class="rebate-item" @click="selectRebateFn(item, index)" v-for="(item, index) in rebateItems"
                    :key="index" :class="index == selectRebate ? 'selectRebate' : ''">
                    <text class="rebate-pay-price">￥{{ item.PayPrice }}</text>
                    <text>赠送{{ item.GetPrice }}元</text>
                </view>
            </view>
            <view class="select-tip" v-if="false">
                <text class="price-text">{{ selectTip }}充值50赠送10元</text>
            </view>
            <view class="card-group">
                <!-- <card-cell-input
                    ref="customMoney"
                    label="充值金额"
                    placeholder="请输入金额"
                    :inputType="'number'"></card-cell-input> -->
                <view class="card-group-cell">
                    <text class="label">充值金额</text>
                    <input class="input" type="number" inputmode="decimal" v-model="payMoney" placeholder="请输入金额" />
                </view>
            </view>
            <view class="pay-info card-group">
                <card-group-cell ref="payTo" class="pay-to" label="收款用户" :isRadioView="true"
                    :radioItems="[radioItems[0]]" :value="radioItems[0].value" :isShowRight="false"></card-group-cell>
                <card-group-cell class="pay-way" label="支付方式" :value="payName"
                    @click.native="$refs.payWay.open()"></card-group-cell>
            </view>
            <button class="btn btn-success btn-action" @click="submit">提交</button>
        </view>
        <uni-popup type="bottom" ref="payWay" background-color="#fff" :safe-area="false">
            <pay-way :payPrice="payMoney ? String(payMoney) : ''" v-if="payList.length > 0" :payList="payList"
                @cancel="cancel" @select="select"></pay-way>
        </uni-popup>
        <uni-popup ref="authorizationTip" type="center" :animation="false">
            <view class="pop-return-box">
                <authorization-box @tipclose="tipclose"></authorization-box>
            </view>
        </uni-popup>

        <!-- 支付二维码 -->
        <uni-popup ref="qcodePopup" type="right">
            <qcode @onBack="onBack" :qcode="qcode" :name="codeName" :url_base64="url_base64" :Sn="paySn"
                :money="payMoney"></qcode>
        </uni-popup>
    </view>
</template>

<script>
import { getAccountBalance, ApplyRecharge } from "@/service/api/member.js"
import { getList } from "@/service/api/businessPay.js"
import { GetMiniAppPayData, GetMiniAppId } from "@/service/api/weChat.js"
import { GetSetMeatList } from "@/service/api/rechargeSeMeat.js"
import { getBusinessReceivingBank } from "@/service/api/businessBank.js"
import cardCellInput from "@/components/common/cell/card-cell-input.vue"
import cardGroupCell from "@/components/common/cell/card-group-cell.vue"
import payWay from "@/components/common/pay-way.vue"
import authorizationBox from "@/components/order/authorization-box.vue"
import storage from "@/uni-sub-base/utils/storage.js"
import configs from "@/config/config.js"
import privacyAgreement from "@/components/privacy-agreement/privacy-agreement.vue"
import qcode from "@/pages_shop/packet/order/qcode.vue"
export default {
    components: {
        cardGroupCell,
        cardCellInput,
        payWay,
        authorizationBox,
        qcode
    },
    data() {
        return {
            config: {
                title: "充值申请",
                back: true,
                color: ["#333333"],
                centerSlot: true,
                barPlaceholder: true,
                // backgroundColor: [1, "#F7F9FB"],
            },
            balance: 0,
            selectRebate: -1,
            selectTip: "",
            rebateItems: [],
            payList: [],
            radioItems: [{ value: "1", text: "总部" }],
            PaymentPayWay: 0,
            payName: "",
            payType: null,
            payMoney: null,
            qcode: "",
            codeName: "微信",
            url_base64: "",
            paySn: "",
        }
    },
    onLoad() { },
    mounted() {
        this.getAccountBalance()
        this.getPayList()
        this.getBusinessReceivingBank()
        this.GetSetMeatList()
    },
    methods: {
        GetSetMeatList() {
            GetSetMeatList().then((res) => {
                if (res.Data && res.Data.length > 0) {
                    this.rebateItems = res.Data;
                }
            })
        },
        getBusinessReceivingBank() {
            getBusinessReceivingBank().then((res) => {
                if (res.Data && res.Data.length > 0) {
                    res.Data.forEach((e, index) => {
                        e.value = String(index)
                        e.text = index == 0 ? "总部" : e.BankTypeName
                    })
                    this.radioItems = res.Data
                }
            })
        },
        getAccountBalance() {
            getAccountBalance().then((res) => {
                if (res.State) {
                    this.balance = res.Data.RechargeBalance + res.Data.SelfBalance
                }
            })
        },
        selectRebateFn(item, index) {
            this.selectRebate = index
            this.selectTip = item.Title
            this.payMoney = this.rebateItems[index].PayPrice
        },
        custom() {
            this.selectRebate = -1
        },
        tipclose() {
            this.$refs.authorizationTip.close()
        },
        submit() {
            let that = this;
            if (this.payMoney == null) {
                uni.showToast({
                    title: "请输入充值金额",
                    icon: "none",
                    duration: 2000,
                })
                return
            }
            if (this.payMoney <= 0) {
                uni.showToast({
                    title: "充值金额必须大于0",
                    icon: "none",
                    duration: 2000,
                })
                return
            }
            let webInfo = storage.getCache("webInfo")
            let openId = storage.getCache("openId")
            if (
                this.payType == 4 ||
                this.payType == 7 ||
                this.payType == 14 ||
                this.payType == 8
            ) {
                if (!openId) {
                    this.$refs.authorizationTip.open()
                    return
                }
            }
            let param = {
                Money: this.payMoney,
                ParentId: 0,
                // PayWay: this.payType == 0 ? 1 : 2,
                PayWay: 13,
                userId: 0,
            }
            ApplyRecharge(param).then((res) => {
                if (res.State == 1) {
                    this.paySn = res.Data.OutTradeNo
                    if (this.payType == 0) {
                        this.easyGoTo("/pages_me/packet/finance/rechargeVoucher")
                    }
                    if (
                        this.payType == 4 ||
                        this.payType == 7 ||
                        this.payType == 14 ||
                        this.payType == 8
                    ) {
                        //微信支付 && 富友支付
                        //#ifdef MP-WEIXIN
                        let notify_url = configs.baseUrl + "Notify/ApplyPay/" + webInfo.BusinessId
                        let tip = "充值支付"
                        let payParam = {
                            tip: tip,
                            paySn: res.Data.OutTradeNo,
                            money: res.Data.Money,
                            notifyUrl: notify_url,
                            payWay: this.payType,
                            businessId: webInfo.BusinessId,
                            openId: openId,
                        }
                        uni.showLoading({
                            title: "付款中..",
                            mask: true,
                        })
                        that.fuiouPay(payParam)
                        //#endif
                    }

                    // 微信扫码支付
                    if (this.payType == 13) {
                        this.codeName = "微信";
                        let notify_url = configs.baseUrl + "Notify/ApplyPay/" + webInfo.BusinessId
                        let tip = "充值支付"
                        let payParam = {
                            tip: tip,
                            // orderSn: "",
                            paySn: res.Data.OutTradeNo,
                            money: res.Data.Money,
                            notifyUrl: notify_url,
                            payWay: this.payType,
                            businessId: webInfo.BusinessId,
                            openId: openId,
                            type: 2,
                        }
                        uni.showLoading({
                            title: "付款中..",
                            mask: true,
                        })
                        that.fuiouPay(payParam)
                    }
                    // 支付宝扫码支付
                    if (this.payType == 53) {
                        this.codeName = "支付宝";
                        let notify_url = configs.baseUrl + "Notify/ApplyPay/" + webInfo.BusinessId
                        let tip = "充值支付"
                        let payParam = {
                            tip: tip,
                            // orderSn: "",
                            paySn: res.Data.OutTradeNo,
                            money: res.Data.Money,
                            notifyUrl: notify_url,
                            payWay: 13,
                            businessId: webInfo.BusinessId,
                            openId: openId,
                            type: 1,
                        }
                        uni.showLoading({
                            title: "付款中..",
                            mask: true,
                        })
                        that.fuiouPay(payParam)
                    }


                } else {
                    this.easyToast(res.Msg)
                }

            })
        },
        fuiouPay(payParam) {
            var that = this
            let path = "?businessId=0"
            GetMiniAppPayData(payParam, path).then((payRes) => {
                if (payRes.State) {
                    if (this.payType == 13 || this.payType == 53) {
                        uni.hideLoading()
                        that.qcode = payRes.Data.url
                        that.url_base64 = payRes.Data.url_base64
                        that.$refs.qcodePopup.open()
                    } else {
                        that.openMiniPay(payRes)
                    }
                } else {
                    that.easyToast(payRes.Msg)
                    setTimeout(() => {
                        uni.hideLoading()
                    }, 2000)
                }
            })
        },
        openMiniPay(payRes) {
            var that = this
            //微信支付api1
            uni.requestPayment({
                provider: "wxpay",
                // appId:payRes.Data.appId,
                timeStamp: String(payRes.Data.timeStamp),
                nonceStr: payRes.Data.nonceStr,
                package: payRes.Data.package,
                signType: payRes.Data.signType,
                paySign: payRes.Data.paySign,
                success: function (res) {
                    uni.hideLoading()
                    that.easyRemoveCurrentGoTo("/pages_me/packet/finance/rechargeRecord")
                },
                fail: function (err) {
                    uni.hideLoading()
                    // that.getOrderDetail()
                    that.goOrderPage()
                },
            })
        },
        //获取支付方式
        getPayList() {
            let param = {
                usageScenario: 2,
            }
            let path = "?usageScenario=2"
            getList(param, path).then((res) => {
                if (res.Data && res.Data.length > 0) {
                    this.payList = res.Data
                    let arrPayWay = this.payList.map(item => item.PaymentPayWay);
                    this.payList.forEach((e, index) => {
                        if (e.PayType == 13 && !arrPayWay.includes(53)) {
                            this.payList.push({
                                "PayName": "支付宝扫码支付",
                                "PayType": 53,
                                "OrderBy": e.OrderBy + 1,
                                "IsDefault": 0,
                                "UsageScenario": "|0|1|2|3|6|",
                                "NeedUploadProof": 0,
                                "AccountCode": "扫码",
                                "PayTypeName": "支付宝扫码支付",
                                "UsageScenarioList": [
                                    "批发订货",
                                    "零售商城",
                                    "账户充值",
                                    "升级下单",
                                    "代客下单"
                                ],
                                "Balance": -1,
                                "IsOpenRecharge": 0,
                                "PayWay": 1,
                                "PaymentPayWay": 53,
                            })
                        }
                    })
                    this.payName = res.Data[0].PayName
                    this.payType = res.Data[0].PaymentPayWay
                }
            })
        },
        select(item) {
            this.PaymentPayWay = item.PaymentPayWay
            this.payName = item.PayName
            this.payType = item.PaymentPayWay
            this.$refs.payWay.close()
        },
        cancel() {
            this.$refs.payWay.close()
        },
    },
}
</script>

<style lang="scss">
.container {
    // padding: $app-page-padding;
}

.header {
    height: 200rpx;
    background: $app-color-main;
    padding: $app-page-padding;
    margin: $app-page-padding;
    border-radius: $border-radius-10;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    margin-bottom: 20rpx;

    text {
        color: $color-white;
    }

    .balance-title {
        margin-bottom: 20rpx;
        font-size: $font-size-32;
    }

    .balance-price {
        font-size: $font-size-56;
    }

    .bg {
        width: 100%;
        position: absolute;
        left: 0;
        bottom: 0;
    }
}

.main {
    padding: $app-page-padding;

    .rebate-info {
        display: flex;
        flex: 1;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;

        .rebate-item {
            width: 220rpx;
            height: 125rpx;

            border-radius: $border-radius-10;
            border: solid 1rpx $app-color-main;
            margin-bottom: 20rpx;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;

            text {
                color: $app-color-main;
            }

            .rebate-pay-price {
                margin-bottom: 8rpx;
            }
        }

        .selectRebate {
            background: $app-color-main;

            text {
                color: $color-white;
            }
        }

        &:after {
            content: " ";
            width: 33%; //这个宽度和子元素宽度一致
            height: 0;
            display: block;
        }
    }

    .select-tip {
        margin-bottom: 40rpx;
    }

    .pay-info {
        margin-bottom: 40rpx;
    }

    .btn-action {
        height: 88rpx;
        border-radius: $border-radius-10;
    }
}

.card-group-cell {
    min-height: 55rpx;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: $app-page-padding $app-page-padding $app-page-padding 0;
    margin-left: $app-page-padding;
    border-bottom: solid 1rpx $uni-bg-color-grey;

    &:last-child {
        // border-bottom: 0;
    }

    .label {
        min-width: 180rpx;
    }

    .input {
        outline: none;
        border: none;
        width: 100%;
        display: flex;
        flex: 1;
        padding: 10rpx 0;
        font-size: $font-size-28;
        background: none;
    }

    .btn-get-code {
        display: flex;
        flex: 1;
        justify-content: flex-end;
    }
}

.login-icon {
    width: 32rpx;
    height: 32rpx;
    display: flex;
    margin-right: $app-page-padding;
}
</style>
